<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header class="pta fz14">
        <!-- logo -->
        <img src="./imgs/new-logo-white2.png" alt="" class="logo fl mg20 ml30">
        <!-- 导航 -->
        <ul class="nav fl clearfix pta">
            <li class="fl mr20"><a href="./index.html" target="_blank">首页</a> </li>
            <li class="fl mr20"><a href="./classfly.html" target="_blank">API</a></li>
            <li class="active fl mr20"><a href="./API-detail.html" target="_blank">产品服务</a></li>
            <li class="fl mr20"><a href="./data.html" target="_blank">案例</a></li>

        </ul>
        <!-- 登录和注册 -->
        <div class="right-box fr mr30 fz12">
            <a href="#">登录</a>
            <a href="#" class="reg">注册有礼</a>
        </div>
    </header>
        <!-- 广告部分 -->
        <div id="advert" class="bsb">
            <div class="container tcenter">
                <p class="fcff"> 免费试用上百种API、体验各类产品和服务</p>
                <p class="server fz12 bsb"><a href="#">云服务</a></p>
            </div>
        </div>
        <!-- 页脚部分 -->
        <footer class="container">
            <div class="clearfix">
                <!-- 左边列表部分 -->
                <div class="fl">
                    <dl>
                        <dt>联系与支持</dt>
                        <dd> 400-882-7715</dd>
                        <dd>售前咨询</dd>
                        <dd>客服&售后</dd>
                        <dd>常见问题</dd>
                        <dd>极速工单</dd>
                        <dd>投诉与建议</dd>
                    </dl>
                    <dl>
                        <dt>关于源码 </dt>
                        <dd>合作伙伴</dd>
                        <dd>服务条款</dd>
                        <dd>隐私政策</dd>
                        <dd>市场合作</dd>
                        <dd>反商业贿赂声明</dd>
                    </dl>
                    <dl>
                        <dt>快速入口</dt>
                        <dd>API数据</dd>
                        <dd>黑钻会员</dd>
                        <dd>新闻动态</dd>
                        <dd>联系我们</dd>
                        <dd>加入我们</dd>
                    </dl>
                    <dl>
                        <dt>产品服务
                        </dt>
                        <dd>云监测</dd>
                        <dd>云查询</dd>
                        <dd>云助手</dd>
                        <dd>聚盒子</dd>
                        <dd>云充值</dd>
                    </dl>
                    <dl>
                        <dt>解决方案</dt>
                        <dd>数字中台</dd>
                        <dd>慧集：API生命周期管理</dd>
                        <dd>有赢：助力企业营销</dd>
                    </dl>
                </div>
                <!-- 右边二维码部分 -->
                <div class="fr tcright">
                    <p class="fz16">微信公众号</p>
                    <p class="fz12 fc66 mg30">源码时代</p>
                    <img src="./imgs/103-demo.png" alt="" class="mg30">
                </div>
            </div>
            <!-- 下最后版权部分 -->
            <div class="clearfix">
                <p class="fl fz12 fc66"><img src="./imgs/bei1.png" alt=""><img src="./imgs/bei2.png"
                        alt="">增值电信业务经营许可证：蜀B2-20180596蜀ICP备15006450号-3营业执照</p>
                <p class="fr fz12 fc66">源码大数据股份有限公司©版权所有</p>
            </div>
        </footer>
            <!-- 侧边的联系我们 -->
    <div id="relation">
        <ul class="tcenter fz16">
            <li class="ptr"><a href="#">电话</a>
                <!-- 电话联系 -->
                <div id="tel" class="fwb">
                    888-8888-8888<span></span>
                </div>
            </li>
            <li><a href="#">QQ</a> </li>
            <li><a href="#">信息</a> </li>
        </ul>
        <!-- 返回顶部 -->
        <div class="top fz14 fc66 tcenter">返回顶部</div>
    </div>


        <script>
            // 换页时的js样式
let changepages=document.querySelectorAll('header .nav li');
// console.log( changepages.length);
changepages.forEach(function(v){
  v.addEventListener('mouseover',function(){
    for (let j = 0; j < changepages.length; j++) {
      changepages[j].classList.remove('active');
    }
    v.classList.add('active');
  })
  v.addEventListener('mouseout',function(){
            v.classList.remove('active');
            changepages[1].classList.add('active');
        })
})
// 侧边栏的js代码
let sTop=document.querySelector("#relation .top")
window.addEventListener('scroll',function(){
  let asideList=document.documentElement.scrollTop;
  if(asideList>=600){
    relation.style.display='block';
  }else{
    relation.style.display='none';
  }
})
let timeid=null;
sTop.addEventListener('click',function(){
timeid=window.setInterval(function(){
  let asideList=document.documentElement.scrollTop;
document.documentElement.scrollTop=asideList-50;
// console.log(asideList);
if(asideList<=30){
  window.clearInterval(timeid);
}
},10)
})
        </script>
</body>
</html>